<template>
    <div>
        <el-dialog
            :title="title"
            :visible.sync="visible"
            width="60%"
            :before-close="handleClose"
            :close-on-click-modal="false"
            append-to-body
            top="50px"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="110px"
                class="demo-ruleForm"
            >
                <el-form-item label="升级编码：" prop="upgradeCode">
                    <span>{{
                        type == 1 ? upgradeMsg : editForm.upgradeCode
                    }}</span>
                </el-form-item>
                <el-form-item label="升级省份：" prop="areaCode">
                    <el-checkbox-group v-model="ruleForm.areaCode">
                        <el-checkbox
                            v-for="item in areaLists"
                            :label="item.areaCode"
                            :key="item.areaCode"
                            name="type"
                            >{{ item.areaName }}</el-checkbox
                        >
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="发布类型：" prop="type">
                    <el-radio-group v-model="ruleForm.type">
                        <el-radio label="1">定时发布</el-radio>
                        <el-radio label="2">主动发布</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="升级内容：" prop="upgradeInfo">
                    <el-input
                        type="textarea"
                        v-model="ruleForm.upgradeInfo"
                    ></el-input>
                </el-form-item>
                <el-form-item label="mysql语句：" prop="mysqlSQL">
                    <el-input
                        type="textarea"
                        v-model="ruleForm.mysqlSQL"
                    ></el-input>
                </el-form-item>
                <el-form-item label="达梦语句：" prop="dmSQL">
                    <el-input
                        type="textarea"
                        v-model="ruleForm.dmSQL"
                    ></el-input>
                </el-form-item>
                <el-form-item label="申通语句：" prop="oscarSQL">
                    <el-input
                        type="textarea"
                        v-model="ruleForm.oscarSQL"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    class="upload_style"
                    label="jar包（tomcat）："
                    prop="tomcatJar"
                >
                    <template #label>
                        jar包<br />
                        (tomcat)：
                    </template>
                    <el-upload
                        class="upload-demo"
                        ref="tomcatJar"
                        :action="uploadImgUrl"
                        :on-remove="tomcatRemove"
                        :data="{
                            upgradeCode:
                                type == 1 ? upgradeMsg : editForm.upgradeCode
                        }"
                        v-loading.fullscreen.lock="loading"
                        element-loading-text="拼命上传中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0,0,0,0.1)"
                        :before-upload="beforeUpload"
                        :limit="1"
                        :on-error="handError"
                        :on-exceed="handleExceed"
                        :file-list="tomcatFileList"
                        :on-success="tomcatSuccess"
                    >
                        <el-button size="small" type="primary"
                            >点击上传</el-button
                        >
                        <!-- <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件，且不超过500kb
                        </div> -->
                    </el-upload>
                </el-form-item>
                <el-form-item
                    class="upload_style"
                    label="jar包（TongWeb）："
                    prop="tongWebJar"
                >
                    <template #label>
                        jar包<br />
                        (TongWeb)：
                    </template>
                    <el-upload
                        class="upload-demo"
                        :action="uploadImgUrl"
                        :on-remove="tongWebRemove"
                        :data="{
                            upgradeCode:
                                type == 1 ? upgradeMsg : editForm.upgradeCode
                        }"
                        :before-upload="beforeUpload"
                        v-loading.fullscreen.lock="loading"
                        element-loading-text="拼命上传中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0,0,0,0.1)"
                        :limit="1"
                        :on-error="handError"
                        :on-exceed="handleExceed"
                        :file-list="tongWebFileList"
                        :on-success="tongWebSuccess"
                    >
                        <el-button size="small" type="primary"
                            >点击上传</el-button
                        >
                        <!-- <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件，且不超过500kb
                        </div> -->
                    </el-upload>
                </el-form-item>
                <el-form-item
                    class="upload_style"
                    label="jar包（warWeb）："
                    prop="tongWebWar"
                >
                    <template #label>
                        jar包<br />
                        (warWeb)：
                    </template>
                    <el-upload
                        class="upload-demo"
                        :action="uploadImgUrl"
                        :on-remove="warWebRemove"
                        :data="{
                            upgradeCode:
                                type == 1 ? upgradeMsg : editForm.upgradeCode
                        }"
                        :before-upload="beforeUpload"
                        v-loading.fullscreen.lock="loading"
                        element-loading-text="拼命上传中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0,0,0,0.1)"
                        :limit="1"
                        :on-error="handError"
                        :on-exceed="handleExceed"
                        :file-list="warWebFileList"
                        :on-success="warWebSuccess"
                    >
                        <el-button size="small" type="primary"
                            >点击上传</el-button
                        >
                        <!-- <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件，且不超过500kb
                        </div> -->
                    </el-upload>
                </el-form-item>
                <el-form-item
                    class="upload_style"
                    label="vue包："
                    prop="vuePackage"
                >
                    <el-upload
                        class="upload-demo"
                        :action="uploadImgUrl"
                        :on-remove="vueRemove"
                        :before-upload="beforeUpload"
                        :data="{
                            upgradeCode:
                                type == 1 ? upgradeMsg : editForm.upgradeCode
                        }"
                        v-loading.fullscreen.lock="loading"
                        element-loading-text="拼命上传中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0,0,0,0.1)"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="vueFileList"
                        :on-success="vueSuccess"
                        :on-error="handError"
                        accept="zip,rar"
                    >
                        <el-button size="small" type="primary"
                            >点击上传</el-button
                        >
                        <!-- <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件，且不超过500kb
                        </div> -->
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    type="primary"
                    @click="submitForm('ruleForm')"
                    >确 定</el-button
                >
                <el-button size="small" @click="resetForm('ruleForm')"
                    >取 消</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addTask, areaList, editUpgrade } from '@/api/task'
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        upgradeMsg: {
            //升级code
            type: String,
            default: ''
        },
        editForm: {
            //编辑回显内容
            type: Object,
            default: () => {}
        },
        title: {
            type: String,
            default: ''
        },
        type: {
            //新增1  编辑2
            type: Number,
            default: ''
        }
    },
    name: 'addTaskDialog',
    components: {},
    data() {
        return {
            btn_loading: false,
            uploadImgUrl: process.env.VUE_APP_BASE_API + 'api/file/upLoadFile', //上传图片
            loading: false, //图片上传loading
            ruleForm: {
                upgradeCode: '', //升级编码 点击新增是后端生成的
                areaCode: [],
                upgradeInfo: '', //升级内容
                status: '1', //状态 1草搞 2发布
                type: '1', //发布类型1-定时发布或2-主动发布
                mysqlSQL: '', //mysql语句
                dmSQL: '', //达梦
                oscarSQL: '', //神通
                tomcatJar: '',
                tongWebJar: '',
                tongWebWar: '',
                vuePackage: ''
            },
            rules: {
                areaCode: [
                    {
                        required: true,
                        message: '请选择升级省份',
                        trigger: 'blur'
                    }
                ],
                type: [
                    {
                        required: true,
                        message: '请选择发布类型',
                        trigger: 'blur'
                    }
                ],
                upgradeInfo: [
                    {
                        required: true,
                        message: '请填写升级内容',
                        trigger: 'blur'
                    }
                ]
                // tomcatJar: [{ validator: this.validateFile, trigger: 'blur' }],
                // tongWebJar: [{ validator: this.validateFile, trigger: 'blur' }],
                // vuePackage: [
                //     {
                //         required: true,
                //         message: '请上传vue文件',
                //         trigger: 'blur'
                //     },
                //     { validator: this.validateVue, trigger: 'blur' }
                // ]
            },
            areaLists: [],
            tomcatFileList: [], //tomcat
            tongWebFileList: [], //tongWeb
            warWebFileList: [], //war
            vueFileList: []
        }
    },
    created() {
        // 获取区域List
        this.getArea()
        if (this.type == 2) {
            // 编辑
            this.ruleForm = this.editForm
            this.ruleForm.areaCode = this.editForm.areaCode.split(',')
            this.ruleForm.type = this.editForm.type.toString()
            // 回显
            if (this.editForm.tomcatJar) {
                this.tomcatFileList.push({
                    name: 'tomcatJar包',
                    url: this.editForm.tomcatJar
                })
            }
            if (this.editForm.tongWebJar) {
                this.tongWebFileList.push({
                    name: 'tongWebJar包',
                    url: this.editForm.tongWebJar
                })
            }
            if (this.editForm.vuePackage) {
                this.vueFileList.push({
                    name: 'vuePackage包',
                    url: this.editForm.vuePackage
                })
            }
            if (this.editForm.tongWebWar) {
                this.vueFileList.push({
                    name: 'tongWebWar包',
                    url: this.editForm.tongWebWar
                })
            }
        }
    },

    mounted() {},
    methods: {
        //上传事件 start
        beforeUpload(file) {
            let fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
            const isJPG =
                fileType === 'zip' || fileType === 'war' || fileType === 'jar' ||  fileType === 'rar'
            if (!isJPG) {
                this.$Message({
                    text: '上传文件只能是 zip、war、jar格式!',
                    type: 'error'
                })
                return false
            }
            // this.loading = true
        },
        tomcatRemove(file, fileList) {
            this.tomcatFileList = fileList
            this.ruleForm.tomcatJar = ''
        },
        handError() {
            this.loading = false
        },
        tomcatSuccess(response, file, fileList) {
            console.log(response)
            this.loading = false
            if (response.code == 200) {
                this.ruleForm.tomcatJar = response.msg;
                this.$Message({
                    text: response.msg,
                    type: 'success'
                })
            } else {
                this.tomcatFileList = []
                this.$Message({
                    text: response.msg,
                    type: 'warning'
                })
            }
        },
        // tongWeb 上传事件 start
        tongWebRemove(file, fileList) {
            this.tongWebFileList = fileList
            this.ruleForm.tongWebJar = ''
        },
        tongWebSuccess(response, file, fileList) {
            this.loading = false
            if (response.code == 200) {
                this.ruleForm.tongWebJar = response.msg
                this.$Message({
                    text: response.msg,
                    type: 'success'
                })
            } else {
                this.tongWebFileList = []
                this.$Message({
                    text: response.msg,
                    type: 'warning'
                })
            }
        },
        // warWeb 上传事件 start
        warWebRemove(file, fileList) {
            this.warWebFileList = fileList
            this.ruleForm.tongWebWar = ''
        },
        warWebSuccess(response, file, fileList) {
            this.loading = false
            if (response.code == 200) {
                this.ruleForm.tongWebWar = response.msg
                this.$Message({
                    text: response.msg,
                    type: 'success'
                })
            } else {
                this.warWebFileList = []
                this.$Message({
                    text: response.msg,
                    type: 'warning'
                })
            }
        },
        // Vue 上传事件 start
        vueRemove(file, fileList) {
            this.vueFileList = fileList
            this.ruleForm.vuePackage = ''
        },
        vueSuccess(response, file, fileList) {
            this.loading = false
            if (response.code == 200) {
                this.ruleForm.vuePackage = response.msg
                this.$Message({
                    text: response.msg,
                    type: 'success'
                })
            } else {
                this.vueFileList = []
                this.$Message({
                    text: response.msg,
                    type: 'warning'
                })
            }
        },
        // 公共上传提示
        handleExceed() {
            console.log(this)
            this.$Message({
                text: '只能上传一个文件',
                type: 'warning'
            })
        },
        // jar包(tomcat)校验
        validateFile(rule, value, callback) {
            if (!this.ruleForm.tomcatJar && !value) {
                callback(new Error('至少需要上传一个文件'))
            } else {
                callback()
            }
        },
        // jar包(TomcatJar)校验
        validateTongWebJar(rule, value, callback) {
            if (!value) {
                return callback(new Error('请选择文件'))
            }
            // 这里可以添加更多的文件验证逻辑，例如检查文件大小、格式等
            // ...
            callback()
        },
        // jar包(TomcatJar)校验
        validateVue(rule, value, callback) {
            if (!value) {
                return callback(new Error('请选择文件'))
            }
            // 这里可以添加更多的文件验证逻辑，例如检查文件大小、格式等
            // ...
            callback()
        },
        // 获取区域List
        getArea() {
            areaList().then(res => {
                this.areaLists = res.data || []
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.ruleForm.areaCode = this.ruleForm.areaCode.toString()
                    this.ruleForm.upgradeCode =
                        this.type == 1
                            ? this.upgradeMsg
                            : this.editForm.upgradeCode
                    console.log(this.ruleForm)
                    if (this.type == 2) {
                        // 编辑
                        editUpgrade(this.ruleForm).then(res => {
                            if (res.code == 200) {
                                this.$Message({
                                    text: res.msg,
                                    type: 'success'
                                })
                                this.$emit('getList')
                                this.$emit('close')
                            }
                        })
                    } else {
                        addTask(this.ruleForm).then(res => {
                            if (res.code == 200) {
                                this.$Message({
                                    type: 'success',
                                    text: res.msg
                                })

                                this.$emit('getList')
                                this.$emit('close')
                            }
                        })
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
            this.tomcatFileList = []
            console.log(this.ruleForm, 666)
            this.$emit('close')
        },
        handleClose() {
            this.$refs['ruleForm'].resetFields()
            this.$emit('close')
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-checkbox {
    width: 135px;
}
::v-deep .demo-ruleForm .el-progress-bar__outer{
    height: 6px !important;
}
</style>
